<template>
	<div>
		查询我所教授课程的班级
		<el-select v-model="valueClass" clearable placeholder="请选择">
			<el-option v-for="item in classes" :key="item.id"
				:label="item.grade+'级'+item.structure.major+'专业'+item.classes+'班'" :value="item.id">
			</el-option>
		</el-select>
		<el-button type="primary" @click="onSubmit()">确定</el-button>
		<div>
			<el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
				<el-table-column prop="name" label="姓名" width="180">
				</el-table-column>
				<el-table-column prop="major" label="专业" width="180">
				</el-table-column>
				<el-table-column prop="studentNumber" label="学号">
				</el-table-column>
				<el-table-column prop="phonenum" label="联系方式">
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button size="mini" type="danger" @click="upadteScore(scope.$index, scope.row)">录入成绩
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				classes: [],
				valueClass: '',
				tableData: []
			}
		},
		methods: {
			selectClass() {
				this.$axios({
					method: 'post',
					url: "/api/v1/courseManager/getClassByTeacherId/2015",
				}).then(r => {
					console.log(r);
					if (r.data.code == 200) {
						console.log(r.data.data);
						this.classes = r.data.data;
					}
				})
			},
			onSubmit() {
				this.$axios({
					method: 'post',
					url: "api/v1/courseManager/classId/" + this.valueClass,
				}).then(r => {
					if (r.data.code == 200) {
						this.tableData = r.data.data.data;
						console.log(r.data.data.data);
					}
				})
			},
			tableRowClassName({
				row,
				rowIndex
			}) {
				if (rowIndex === 1) {
					return 'warning-row';
				} else if (rowIndex === 3) {
					return 'success-row';
				}
				return '';
			},
			upadteScore(index, row) {
				console.log(index, row);
			}
		},
		created() {
			this.selectClass();
		}
	}
</script>

<style>
	.el-table .warning-row {
		background: oldlace;
	}

	.el-table .success-row {
		background: #f0f9eb;
	}
</style>
